/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-07-08 11:07:01
 * @LastEditors: cuidm
 * @LastEditTime: 2022-09-30 13:36:00
 */
import React, { useState, useEffect, useRef } from "react";
import { Tabs, Row, Col, Space} from "antd";
import { ProDescriptions } from '@ant-design/pro-components';
import { ArrowLeftOutlined, UploadOutlined, DownloadOutlined, SelectOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { CmdbContent, CmdbHeader, TempImportModal } from "@/components";
import cmdbres from "@/data/cmdbres";
import request from "@/utils/request";
import ServiceTemplateInstance from "./instance";

const { TabPane } = Tabs;
const ServiceTemplateDetail = ({ history, match, location }) => {
    const id = match.params.id;
    const [template, setTemplate] = useState({});
    const columns = [
        {
            title: '模版ID',
            key: 'id',
            dataIndex: 'id',
        },
        {
            title: '模版名称',
            key: 'name',
            dataIndex: 'name',
        },
        {
            title: '服务名称',
            key: 'serviceCategoryId',
            dataIndex: 'serviceCategoryId',
            render: (text, record, index)=> {
                return (
                    <span>{record?.big?.name}/{record?.small?.name}</span>
                )
            }
        }
    ];
    const getCategoryData = async (t) => {
        try {
            const res = await request({
                ...cmdbres.queryServiceCategory,
                params: {
                    bizId: t.bizId,
                },
            });
            if (res && res.data && res.data.info) {
                const arr = res.data.info;
                if(t.serviceCategoryId) {
                    let big = null;
                    const small = arr.find(item=> item.id == t.serviceCategoryId);
                    if(small) {
                        big = arr.find(item=> item.id == small.parentId);
                    } 
                    Object.assign(t, {small, big})
                    setTemplate(t);
                }
                
            }
        } catch (error) {
            console.log(error);
        } 
    };

    useEffect(() => {
        const t = location?.state?.template??{};
        getCategoryData(t);
    }, []);

    const [activeKey, setActiveKey] = useState('instance');
    const handleTabOnChange = (tab) => {
        setActiveKey(tab)
    }

    return (
        <CmdbContent>
            <div className="cmdb_host_pane">
                <div className="breadcrumbs-layout">
                    <h3><ArrowLeftOutlined 
                        onClick={() => { history.push({
                            pathname: "/business/serviceTemplate",
                        });}}
                    /> 模板详情
                    </h3>
                </div>
                <Tabs defaultActiveKey={activeKey} size="large" style={{ padding: '5px 0px', margin: 0}} onChange={handleTabOnChange}>
                    <TabPane tab="服务模板配置" key="config">
                        <ProDescriptions
                            column={3}
                            title={"基本属性"}
                            dataSource={template}
                            columns={columns}
                            style={{padding: "20px"}}
                        >
                        </ProDescriptions>
                    </TabPane>
                    {/* <TabPane tab="服务模板实例" key="instance">
                        <ServiceTemplateInstance history={history} templateId={id}/>
                    </TabPane> */}
                </Tabs>
            </div>
        </CmdbContent>
    )
}

export default ServiceTemplateDetail;